<template>
	<view class="index-page">
        <!-- paddingTop不生效可换成marginTop -->
		<view class="tab_title" :style="{ paddingTop: statusBarHeight}">
		  <!-- 左上角自定义样式 -->
		  <view class="menu_btn flex-betwee box-sizing"
			:style="{ position: 'fixed', top: menuTop, left: menuRight, width: menuWidth, height: menuHeight, borderRadius: menuBorderRadius}">
			<image class="logo" src="/static/logo.png" @click="goStepPage"></image>
			<view class="tit">uniapp</view>
		  </view>
		</view>
		<view class="content_box box-sizing" :style="{marginTop:contentTop}">
			内容
		</view>
	</view>
</template>
<script>
	export default {
    	data() {
			return {				
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,//状态栏的高度（可以设置为顶部导航条的padding-top）
				menuWidth: uni.getStorageSync('menuInfo').menuWidth,
				menuHeight: uni.getStorageSync('menuInfo').menuHeight,
				menuBorderRadius: uni.getStorageSync('menuInfo').menuBorderRadius,
				menuRight: uni.getStorageSync('menuInfo').menuRight,
				menuTop: uni.getStorageSync('menuInfo').menuTop,
				contentTop: uni.getStorageSync('menuInfo').contentTop,
			}
		},
    }
</script>
 
<style lang="scss" scoped>
        .box-sizing {
	    	box-sizing: border-box;
	    }
    	.index-page {
		width: 100vw;
		height: calc(100vh - 64px); // 解决页面无内容时上下滚动问题 高度默认44px + padding-top 20px
		// padding: 32rpx;
 
		.tab_title {
			width: 100%;
			height: 44px !important; //这个是固定的44px（所有小程序顶部高度都是 = 44px + 手机系统状态栏高度）
			line-height: 44px;
			text-align: center;
			// background-color: #d00;
			background-color: #f8f8f8 !important;
			position: fixed;
			top: 0;
			z-index: 9999;
			color: #000;
			font-weight: 500;
 
			.menu_btn {
				width: 414rpx !important;
				// background-color: #ffffff; //这个是小程序默认的标题栏背景色
				overflow: hidden;
 
				// position: fixed; //行内式写了固定定位--目的是去掉下划页面一起滚动问题
				.arrowleft {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-160%, -50%) !important;
					-webkit-transform: translate(-160%, -50%) !important;
				}
 
				.text_box {
					width: 1rpx;
					height: 20px;
					background-color: #ddd;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%) !important;
					-webkit-transform: translate(-50%, -50%) !important;
				}
 
				.home {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(60%, -50%) !important;
					-webkit-transform: translate(60%, -50%) !important;
				}
			}
		}
	}
</style>